<template>
  <div class="carbon-carbon">
    <div class="main-box-carbon">
      <div>
        <div style="margin-top: 10px" class="flex-box-headerl">
          <el-form style="margin-right:100px ">
            <el-tag>选择年份：</el-tag>
            <el-form-item style="display: inline-block">
              <el-date-picker class="buildingleft" v-model="year" type="year" value-format='yyyy' placeholder="选择年" size="small">
              </el-date-picker>
              <el-input  class="buildingright" v-model="month" placeholder="请输入月份" size="small"></el-input>
            </el-form-item>
            <el-button class="form-item-inline" size="small" @click="searchYearTable" plain icon="el-icon-search">查询</el-button>
          </el-form>
          <el-form>
            <el-tag>选择查询楼宇：</el-tag>
            <el-form-item style="display: inline-block">
              <el-select v-model="value1" multiple placeholder="请选择" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="getBuildings(item)">
                  <!--<el-checkbox :key="item.value" v-model="item.check">{{item.label}}</el-checkbox>-->
                </el-option>
              </el-select>
            </el-form-item>
            <el-button class="form-item-inline" size="small" @click="searchBuilding()" plain icon="el-icon-search">查询</el-button>
          </el-form>
        </div>
        <div style="width: 230px;margin-left: 50px;" class="tableright">
          <el-descriptions title="" :column="3" size="medium" :colon="false" style="font-size: 17px;font-weight: bold;">
            <el-descriptions-item>
              {{ carbonInformation.year }}年</el-descriptions-item>
            <el-descriptions-item>
              {{ carbonInformation.month }}月</el-descriptions-item>
          </el-descriptions>
        </div>
        <div >

        </div>
        <div class="table_container" style="width: 60%; overflow: auto;margin-left: 300px ">
          <el-table :data="tableData" style="width: 100%;font-size: 15px; " size="small">
            <el-table-column prop="buildingName" label="楼号"></el-table-column>
            <el-table-column prop="powerConsumption" label="电耗" ></el-table-column>
            <el-table-column prop="emissionAmount" label="碳排放量" ></el-table-column>
            <el-table-column prop="buildingPerArea" label="单位面积排放量" ></el-table-column>
          </el-table>
          <!-- 换页菜单 -->
          <div style="text-align:center; margin:20px;padding-right: 50px;">
            <el-pagination background @current-change="handleCurrentChange" :page-size="limit" :current-page="1"
                           layout="total, prev, pager, next" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    </div>
</template>
<script>
import MyEcharts from "../../components/Assessment";
import TanHeader from "../../components/TanHeader";
import {getCarbonTable} from "../../api/user";
import axios from "axios";
import {publicNetworkIpAndPort} from "../../api/globalVar";
export default {
  components: {TanHeader,MyEcharts},
  name: "",
  data() {
    return {
      options: [],
      value1: [],
      buidingSet:new Set(),
      limit: 10,
      total: 0,
      carbonInformation: {
        year:'',
        month:'',
      },
      xValue:[],
      yValue:[],
      xxValue:[],
      yyValue:[],
      charts1:"charts1",
      tableData: [],
      year:'',
      month:'',
      buill:'',
    };
  },
  mounted:function() {
    this.getCarbonTable()
  },
  methods:{
    getBuildings(building){
      // var bui=[]
      console.log("building.label",building.label)
      // bui.push(building.label);
      // console.log("bui",bui)
      this.buidingSet.add(building.label)
      console.log("this.buidingSet",this.buidingSet)
    },
    searchBuilding(){
      let setTestValues = this.buidingSet.values()
      console.log("setTestValues",setTestValues)
      //let temp1 = setTestValues.next().value;
      var bui=[]
      var n=this.buidingSet.size
      // bui.push(temp1)
      for(var i=0;i<n;i++) {
        let temp1 = setTestValues.next().value
        bui.push(temp1);
      }
      console.log("bui",bui)
      this.buill=bui.toString()
      console.log("bui",this.buill)
      //debugger
      getCarbonTable({ year: this.year, month:this.month,buildings:this.buill }).then(res => {
        //debugger
        if (res.data.code == 200) {
          console.log("能耗列表res")
          console.log(res)
          this.options=[]
          var xValueTemp = [];
          for (var i = 0; i < res.data.data.length; i++) {
            for(var j=0;j<res.data.data[i].subBuildingEmissionVos.length;j++) {
              xValueTemp.push(res.data.data[i].subBuildingEmissionVos[j].buildingName);
            }
          }
          for(var i=0;i<xValueTemp.length;i++)
            if(xValueTemp[i]!=xValueTemp[i+1]) {
              this.options.push({label: xValueTemp[i], value: i});
            }
          this.tableData = res.data.data[0].subBuildingEmissionVos
          this.carbonInformation.year=res.data.data[0].emissionYear
          this.carbonInformation.month=res.data.data[0].month
          console.log("this.tableData.emissionYear",this.tableData.emissionYear)
          console.log("this.tableData.month",this.tableData.month)
          this.total = res.data.data[0].subBuildingEmissionVos.length;
          console.log(res.data.total);
        }else{
          this.$message.error(res.data.message);
        }
      })
    },
    searchYearTable(){
      getCarbonTable({ year: this.year, month:this.month,buildings:this.building }).then(res => {
        //debugger
        if (res.data.code == 200) {
          this.buidingSet=new Set(),
          console.log("能耗列表res")
          console.log(res)
          this.options=[]
          var xValueTemp = [];
          for (var i = 0; i < res.data.data.length; i++) {
            for(var j=0;j<res.data.data[i].subBuildingEmissionVos.length;j++) {
              xValueTemp.push(res.data.data[i].subBuildingEmissionVos[j].buildingName);
            }
          }
          for(var i=0;i<xValueTemp.length;i++)
            if(xValueTemp[i]!=xValueTemp[i+1]) {
              this.options.push({label: xValueTemp[i], value: i});
            }
          this.tableData = res.data.data[0].subBuildingEmissionVos
          this.carbonInformation.year=res.data.data[0].emissionYear
          this.carbonInformation.month=res.data.data[0].month
          console.log("this.tableData.emissionYear",this.tableData.emissionYear)
          console.log("this.tableData.month",this.tableData.month)
          this.total = res.data.data[0].subBuildingEmissionVos.length;
          console.log(res.data.total);
        }else{
          this.$message.error(res.data.message);
        }
      })
    },
    getCarbonTable() {
      getCarbonTable({ year: this.year, month:this.month,buildings:this.building }).then(res => {
        //debugger
        if (res.data.code == 200) {
          console.log("能耗列表res")
          console.log(res)
          this.options=[]
          var xValueTemp = [];
            for(var j=0;j<res.data.data[0].subBuildingEmissionVos.length;j++) {
              xValueTemp.push(res.data.data[0].subBuildingEmissionVos[j].buildingName);
            }
          console.log("xValueTemp",xValueTemp)
          for(var i=0;i<xValueTemp.length;i++)
            if(xValueTemp[i]!=xValueTemp[i+1]) {
              this.options.push({label: xValueTemp[i], value: i});
            }
          this.tableData = res.data.data[0].subBuildingEmissionVos
          this.carbonInformation.year=res.data.data[0].emissionYear
          this.carbonInformation.month=res.data.data[0].month
          console.log("this.tableData.emissionYear",this.tableData.emissionYear)
          console.log("this.tableData.month",this.tableData.month)
          this.total = res.data.data[0].subBuildingEmissionVos.length;
          console.log(res.data.total);
        }else{
          this.$message.error(res.data.message);
        }
      })
    },
    handleCurrentChange(val) {
      this.current = val
      this.getCarbonTable()
    },
  },



}
</script>
<style>
.flex-box-headerl{
  margin-left: 300px;
  margin-right: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tableleft,.tableright{
  display: inline-block;
}
.tableleft{
}
.tableright {
  margin-top:15px;
  vertical-align: top;
}
.buildingleft,.buildingright{
  display: inline-block;
}
.buildingleft{
  width: 500px;
  height: 10px;
}
.buildingright{
  width: 200px;
}
.left{
  position: relative;
}
.table_two {
  margin: 16px;
  border-collapse: collapse;
}
.carbonbeijing{
  position: absolute;
  top: 55px;
  right: 60px;
  width: 100%;
  height: 100%;
  background: url(../../pic/co25.jpg);
  background-size: 100% 100%;

}
.carbon-carbon{
  width: 100%;
  background-size: 100% 100%;
}
.main-box-carbon {
  position: relative;
  background-color: #FFFFFF;
  width:100%;
  height:100%;
  text-align: center;
  padding:10px;
  margin-top:15px;
  margin-bottom:100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 4px;
}
.left,.carbonright{
  display: inline-block;
}
.carbonright {
  vertical-align: top;
}
.carbonon,.carbonup{
  display: inline-block;
}

.carbonup {
  vertical-align: top;
}
</style>
